<template> 
    <span> 
      <span v-if="showStyle=='origin'" :title="title||placeholder||emptyText">
        <el-select :size="size" :multiple="multiple" :placeholder="placeholder" :disabled="disabled"  class="my-select" ref="selectRef" v-model="myVal" @change="onChange" :clearable="clearable" @visible-change="$emit('visible-change',$event)" @focus="$emit('focus',$event)" @blur="$emit('blur',$event)" @clear="$emit('blur',$event)" @click="$emit('click',$event)">
            <slot> 
                <el-option disabled value="" style="margin-bottom:5px;">
                  <el-row><el-button @click.stop="$refs['metaItemIdalog'].open()" icon="more">更多</el-button>  </el-row>
                </el-option>
                <el-option v-for="(option,index) in optionsCpd" :key="index" :value="option[propsCpd['id']]" :label="option[propsCpd['name']]">  
                
                <div>
                       <span>{{option[propsCpd['name']]}}</span> 
                       <Icon v-if="multiple==false &&  myVal && myVal==option[propsCpd['id']]" icon="ep:check"/>  
                      <i v-else>&nbsp;&nbsp;</i>  
                </div>
              </el-option> 
            </slot>
        </el-select>  
      </span>
      <span v-else :title="title||placeholder">
        <span :class="showStyle=='x'?{'field-box-x':true}:{'field-box':true}" @click="showSelect"> 
          <span class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true,hidden:true}">
            <slot name="info">
              <span v-if="showStyle=='x'">
                <div v-if="multiple==true" class="field-value">
                  <div  v-if="sels&&sels.length>0">
                    {{ sels.map(k=>k.name).join(split) }}
                  </div>
                  <div class="field-value" v-else-if="myVal && myVal.length>0">
                    {{ myVal.join(split) }}
                  </div>
                  <div>无</div>
                </div> 
                <div v-else class="field-value">
                  <div  v-if="sels">
                    {{ sels.name }}
                  </div>
                  <div v-else-if="myVal">
                    {{ myVal }}
                  </div>
                  <div v-else>无</div>
                </div>
                <div class="field-label">{{ label||title||placeholder||emptyText ||'无' }}</div>
              </span>
              <span v-else>
                <div v-if="multiple===true">
                  <div v-if="sels&&sels.length>0">
                    <el-tag :size="size" v-for="option,idx in sels" :key="idx" :color="option.color" :closable="closable" :effect="effect">{{ option.name }}</el-tag>
                  </div>
                  <div v-else-if=" !myVal ">
                    <el-tag :size="size" v-for="id,idx in myVal" :key="idx" :color="getMyColor({id:id})" :closable="closable" :effect="effect">{{ id }}</el-tag>
                  </div>
                  <el-tag v-else>{{  placeholder||emptyText ||'无' }}</el-tag>
                </div> 
                <div v-else>
                    <el-tag  :size="size" v-if="sels" :color="sels.color" :closable="closable" :effect="effect">{{sels.name||emptyText}}</el-tag>
                    <el-tag  :size="size" v-else-if="myVal">{{ myVal }}</el-tag>
                    <el-tag   v-else>{{ placeholder||emptyText ||'无'}}</el-tag>
                </div>
              </span> 
            </slot>
          </span>
          <span class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true,hidden:true}">
            <slot name="oper">
              <el-select  :multiple="multiple" :size="size"  class="my-select" ref="selectRef" v-model="myVal" @change="onChange" :clearable="clearable" @visible-change="$emit('visible-change',$event)" @focus="$emit('focus',$event)" @blur="$emit('blur',$event)" @clear="$emit('blur',$event)" @click="$emit('click',$event)">
                  <slot>
                      <el-option disabled value="" style="margin-bottom:5px;">
                        <el-row><el-button @click.stop="$refs['metaItemIdalog'].open()" icon="more">更多数据</el-button> </el-row>
                      </el-option> 
                      <el-option v-for="(option,index) in optionsCpd" :key="index" :value="option[propsCpd['id']]" :label="option[propsCpd['name']]">  
                      
                        <div>
                               <span>{{option[propsCpd['name']]}}</span> 
                               <Icon v-if="multiple==false &&  myVal && myVal==option[propsCpd['id']]" icon="ep:check"/> 
                              <i v-else>&nbsp;&nbsp;</i>  
                        </div>
                    </el-option> 
                  </slot>
              </el-select>   
            </slot>
          </span>
        </span>
      </span>
      
      <mdp-dialog ref="metaItemIdalog" title="选择字典" width="80%">
          <template #default="{visible}">
            <MdpMetaItem :visible="visible" :multiple="multiple" :subOpType="'select'" @select="onMdpMetaItemSelect"/>
          </template>
        </mdp-dialog> 
      </span>
    </template> 
    
    <script> 
    import {MdpSelectMixin } from "../../mdp-ui/mixin/MdpSelectMixin.js"
    import MdpMetaItem from './../mdp-meta-item/Index.vue'
    var metaItemCacheList=[]
    export default {
      components: { MdpMetaItem },
      name: 'MdpSelectMeta',
      mixins:[MdpSelectMixin], 
      computed:{
        propsCpd(){
          return this.props||{id:'itemCode',name:'itemName'}
        }
      },
      props:{
        props:{
          type:Object,
          default:function(){
            return null
          }
        }, 
      },
      data(){
        return {
          localStorageKey:'mdp-common-meta-item-list',
        }
      },
      methods:{
        
        initItemOptions(){  
          if(metaItemCacheList && metaItemCacheList.length>0){
            this.item={itemType:'4',options:metaItemCacheList}
          }else{
              this.item={itemType:'4',options:[]} 
          }
        },
        onMdpMetaItemSelect(metaItems){
          var propsCpd=this.propsCpd
          if(this.multiple){
             metaItems.forEach(k=>{
              if(!this.optionsCpd.some(m=>m[propsCpd.id]==k[propsCpd.id])){
                this.item.options.unshift(k) 
              }
              if(!metaItemCacheList.some(m=>m[propsCpd.id]==k[propsCpd.id])){
                metaItemCacheList.unshift(k) 
              }
             })
             this.myVal=metaItems.map(k=>k[propsCpd['id']])
             this.onChange(this.myVal)
          }else{ 
            if(!this.optionsCpd.some(m=>m[propsCpd.id]==metaItems[propsCpd.id])){
              this.item.options.unshift(metaItems) 
            }
            if(!metaItemCacheList.some(m=>m[propsCpd.id]==metaItems[propsCpd.id])){
              metaItemCacheList.unshift(metaItems) 
            }
            this.myVal=metaItems[propsCpd['id']] 
            this.onChange(this.myVal)
          }
          this.onClose();
          this.$refs['metaItemIdalog'].close();
        },
        onClose(){
         }
      },
      mounted(){
          this.initData();
          this.initItemOptions();
          
          
      },
      
      beforeUnmount(){ 
       }
    }
    </script>
    <style lang="scss" scoped>  
      @import '../../mdp-ui/index.scss';
    </style> 
    